<head>
    {% load staticfiles %}
    <meta charset="UTF-8">
    <title>图灵机器人</title>
    <script src="{% static 'bootstrap/js/jquery-2.1.4.min.js' %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static 'stu_exam_manage/class_notice/css/chat.css' %}">
</head>
<body>
    <div id="robot" style="position: fixed; right: 10px;top: 10px; width: 307px;height: 475px;">
        <img src="{% static 'stu_exam_manage/class_notice/img/菲菲.png' %}" style="width: 50%;height: 50%;" id="feifeipng" alt="">
        <div class="chatBox" ref="chatBox" style="display: block;width: 69%;height: 64%;">
            <div class="chatBox-head">
                <p class="iconfont"  style="text-align: center;margin: 4px 49px;font-size: 12px;color: #fefefe;display: inline-block;">你的专属机器人-小菲</p>
            </div>
            <div class="chatBox-info" style="height: 91%;">
            <div class="chatBox-kuang" ref="chatBoxkuang" style="height: 100%; display: block;">
                <div class="chatBox-content" style="height: 100%;">
                    <div class="chatBox-content-demo" id="chatBox-content-demo" style="height: 81%;">

                        <div class="clearfloat">
                            <div class="author-name">
                                <small class="chat-date">火星时间</small>
                            </div>
                            <div class="left">
                                <div class="chat-avatars"><img src="{% static 'stu_exam_manage/class_notice/img/icon01.png' %}" alt="头像"></div>
                                <div class="chat-message" >
                                    快和小菲一起聊人生吧！
                                </div>
                            </div>
                        </div>

                        <div class="clearfloat">
                            <div class="author-name">
                                <small class="chat-date">火星时间</small>
                            </div>
                            <div class="left">
                                <div class="chat-avatars"><img src="{% static 'stu_exam_manage/class_notice/img/icon01.png' %}" alt="头像"></div>
                                <div class="chat-message">
                                    <img src="{% static 'stu_exam_manage/class_notice/img/1.png' %}" alt="">
                                </div>
                            </div>
                        </div>

                    </div>
                <div class="chatBox-send">
                    <div class="div-textarea" contenteditable="true" style="width: 60%;margin-right: 3%;"></div>
                    <div>
                        <button id="chat-fasong" class="btn-default-styles" style="width: 94%;"><img src="{% static 'stu_exam_manage/class_notice/img/send.png' %}" id="sendmsg">
                        </button>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
    <style>
        #robot{
            position: relative;
            width: 25%;
            height: 59%;
        }
        .chatBox{
            position: absolute;
            left: 13.5%;
            top: 20%;
            width: 71%;
            height: 49%;
            border: 1px solid gray;
            background-color: lightgray;
            font-size: 8px;
        }
        #sendmsg{
            width: 29%;
            height:8%;
            margin-top:1px;
        }
        #feifeipng{
            display: block;
            margin:0 auto;
        }
    </style>

    <script>

        //      发送信息
        $("#chat-fasong").click(function () {
            var textContent = $(".div-textarea").html().replace(/[\n\r]/g, '<br>')
            if (textContent != "") {
                $(".chatBox-content-demo").append("<div class=\"clearfloat\">" +
                    "<div class=\"author-name\"><small class=\"chat-date\">" +  getnowtime() + "</small> </div> " +
                    "<div class=\"right\"> <div class=\"chat-message\"> " + textContent + " </div> " +
                    "<div class=\"chat-avatars\"><img src=\"{% static 'stu_exam_manage/class_notice/img/icon01.png' %}\" alt=\"头像\" /></div> </div> </div>");
                //发送后清空输入框
                $(".div-textarea").html("");
                //聊天框默认最底部
                $(document).ready(function () {
                    $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
                });
            }

            // 接收消息
            data = {
                'key': '0bb5f30b07e0478cab799b539e9990ee',
                'info': textContent,
                'loc':'北京市中关村',
                'userid':'{{ username }}'
            }
            $.ajax({
                url:'http://www.tuling123.com/openapi/api',
                type:'POST',
                dataType:'json',
                data:data,
                success:function (arg) {
                    $("input[name='output']").val(arg.text)
                    console.log(arg.text);

                    var resContent = arg.text
                    if (resContent != "") {
                        $(".chatBox-content-demo").append("<div class=\"clearfloat\">" +
                            "<div class=\"author-name\"><small class=\"chat-date\"> " +  getnowtime() + "</small> </div> " +
                            "<div class=\"left\">  " +
                            "<div class=\"chat-avatars\"><img src=\"{% static 'stu_exam_manage/class_notice/img/icon01.png' %}\" alt=\"头像\" /></div><div class=\"chat-message\"> " + resContent + " </div> </div> </div>");
                        //聊天框默认最底部
                        $(document).ready(function () {
                            $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
                        });
                    }
                }
            })
        });


        // 获取当前时间
        function getnowtime() {
            var d = new Date();
            var years = d.getFullYear();
            var month = add_zero(d.getMonth()+1);
            var days = add_zero(d.getDate());
            var hours = add_zero(d.getHours());
            var minutes = add_zero(d.getMinutes());
            var seconds=add_zero(d.getSeconds());
            var ndate = years+"-"+month+"-"+days+"  "+hours+":"+minutes+":"+seconds;
            return ndate
        }
        function add_zero(temp)
        {
            if(temp<10) return "0"+temp;
            else return temp;
        }

    </script>
</body>
